import type { Templates } from "@/views/table/types";
import { Button, Select } from "@arco-design/web-vue";
import { request } from "@/views/table/fragment/http";
import { useDictManager } from "@/views/table/hooks/useDictManage";
const dm = useDictManager();
dm.inject("genders", {
  onLoad(): Promise<any> {
    return request({
      baseUrl: "http://localhost:3000",
      url: "/api/genders",
    });
  },
  onMapping(data: any) {
    console.log(data);
    return data?.data || [];
  },
});
export const templates: Templates = {
  baseUrl: "http://192.168.1.55:3000",
  api: "/api/page",
  tableDataProcess(res, tabledData, page) {
    tabledData.value = res.data;
    console.log(page);
    page.current = res.current;
    page.total = res.total;
  },
  // onUpdate(data: any, config: any) {
  //   console.log(config);
  //   config.visible.value = false;
  // },
  create: {
    title: "新增数据",
  },
  update: {
    title: "修改数据",
    layout: "horizontal",
  },
  detail: {
    title: "查看详情",
  },
  models: [
    {
      title: "姓名",
      field: "name",
      align: "center",
      rules: [{ required: true, message: "姓名必填" }],
      placeholder: "请输入姓名",
      visible: { query: true, filter: true },
      props: {},
    },
    {
      title: "联系方式",
      field: "phone",
      align: "center",
      placeholder: "请输入联系方式",
      rules: [
        { required: true, message: "name is required" },
        { minLength: 5, message: "must be greater than 5 characters" },
      ],
      visible: { query: true, filter: true },
      props: {},
    },
    {
      title: "职位",
      field: "position",
      align: "center",
      placeholder: "请输入联系职位",
      // visible: { query: false, filter: false },
      props: {},
    },
    {
      title: "民族",
      field: "nation",
      align: "center",
      placeholder: "请输入民族",
      visible: { query: false, filter: false },
      props: {},
    },
    {
      title: "地址",
      field: "address",
      align: "center",
      placeholder: "请输入地址",
      visible: { query: false, filter: false },
      props: {},
    },
    {
      title: "性别",
      field: "sex",
      type: "select",
      placeholder: "请选择性别ds",
      renderItem: {
        filter({ column, record }) {
          return <span>{record[column.dataIndex] === 1 ? "男" : "女"}</span>;
        },
        query({ state, key, placeholder }) {
          return (
            <Select
              style="width: 14rem;"
              class="mr-2 mt-2"
              placeholder={placeholder}
              v-model={state[key]}
              options={dm.extract("genders").value}
            />
          );
        },
      },
      props: {
        options: [
          { label: "女", value: 0 },
          { label: "男", value: 1 },
        ],
      },
      visible: { query: true, filter: true },
    },
    {
      title: "邮箱",
      field: "email",
      placeholder: "请输入邮箱",
      // visible: { query: true, filter: true },
    },
  ],
  // filter: [{ field: "", title: "", render: null }],
  // query: [],
  // create: {
  //   title: "",
  //   layout: "vertical",
  //   items: [{ field: "", title: "", rules: null }],
  // },
  // update: null,
  actions: {
    delete(row, config) {
      return (
        <Button status="danger" onClick={() => config.doDelete(row)}>
          删除
        </Button>
      );
    },
    detail(row, config) {
      return <Button onClick={() => config.doDetail(row)}>详情</Button>;
    },
    create(doCreate){
      return <Button onClick={() => doCreate()}>新增</Button>
    }
  },
  // actions: null
};
